 <template>
 	<view class="">
		<view class="search-box">
			<view class="searchCon">
				<u-search 
				height="80" 
				v-model="page.inputVal" 
				bg-color="#F4F4F4" 
				@change="change"
				:clearabled="true"
				placeholder="请输入关键字搜索" 
				:focus="true"
				shape="square"
				action-text="取消"
				@custom="custom" 
				@clear="clear"
				@search="search">
				</u-search>
			</view>
		</view>
 		<view class="content">
 			<template v-if="!isShow">
 				<!-- <view class="history-box">
 					<view class="title-box">
 						<view class="title">此时此刻</view>
 					</view>
 					<view class="history-list">
 						<view class="history-item2" @click="gotoSearchList(item)" v-for="(item, index) in hotJobs"
 							:key="index">
 							{{ item }}
 						</view>
 					</view>
 				</view> -->
 				<view class="history-box">
 					<view class="title-box _df _jb _ac">
 						<view class="title">搜索历史</view>
 						<u-icon class="icon" @click="clean" name="trash" color="#98999a" size="32"></u-icon>
 					</view>
 					<view class="history-list">
 						<view class="history-item" v-for="(item, index) in history" :key="index" @click="gotoSearchList(item)">
 							{{item.searchKey}}
 						</view>
 					</view>
 				</view>
 			</template>
 			<template v-else>
 				<view class="list" v-if="dataList.length>0">
 					<view class="item _df _jb _ac" @click="toView(item,3,index)" v-for="(item,index) in dataList" :key="index">
 						<view class="pic">
 							<image :src="item.coverUrl" mode=""></image>
 						</view>
 						<view class="text">
 							<view class="title clamp1">
 								{{item.fileName}}
 							</view>
 							<view class="info clamp1">
 								{{item.fileLabel}}
 							</view>
 						</view>
 						<u-icon name="arrow-right" color="#888" size="28"></u-icon>
 					</view>
 				</view>
 				<view class="" v-else style="padding-top: 200rpx;">
 					<u-empty text="" mode="search"></u-empty>
 				</view>
 			</template>
 			
 		</view>
 	</view>
 </template>
 <script>
 	let app = getApp().globalData;
	import config from "@/utils/config.js";
 	export default {
 		data() {
 			return {
				page:{
					inputVal:''
				},
				history:[],
 				hotJobs: ['活动','团建','活动报名'],
				dataList:[],
				isShow:false
 			};
 		},
 		onLoad(options) {
			
 		},
 		onShow() {
			this.getHistory()
 		},
 		watch: {

 		},
 		methods: {
			getHistory(){
				let that = this
				uni.$_get({
					url: "findSearchHistory",
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							that.history = data
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getList(){
				let that = this
				uni.$_get({
					url: "searchMusicByName|" + unescape(this.page.inputVal),
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							data.map(item =>{
								if(!item.coverUrl.includes('http')){
									item.coverUrl  = config.host1 + item.coverUrl
								}
							})
							that.isShow = true
							that.dataList = data
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			toView(e,type,index){
				uni.navigateTo({
					url: '/pages/tabbar/music/view?keyWords=' 
					+ this.page.inputVal
					+'&type=' +type 
					+'&activeIndex=' +index
				});
			},
 			gotoSearchList(item){
				this.page.inputVal = item.searchKey
				this.getList()
			},
 			//点击右侧搜索时触发
 			custom() {
				uni.navigateBack()
				this.page.inputVal = ''
				this.getHistory()
 				// if (this.page.inputVal.length > 0 ) {
 				// 	uni.navigateTo({
 				// 		url: "/pages/activity/list?keyword=" + this.page.inputVal
 				// 	});
 				// 	// 登录状态下存入历史记录
 					
 				// } else {
 				// 	this.$u.toast("请先输入或选择关键词！");
 				// }
 				
 			},
			search(){
				this.getList()
				
			},
 			//清空历史记录
 			clean() {
 				let that = this
 				uni.$_get({
 					url: "deletesearchHistory",
 					that: that,
 					success(res) {
 						let data = res.data;
 						if(res.code == 0){
 							that.getHistory()
 						}else{
 							uni.showToast({
 								title: res.msg,
 								duration: 1500,
 								icon:'error'
 							});
 						}
 					},
 					fail(err) {
 						uni.showToast({
 							title: err.msg,
 							duration: 1000,
 							icon:'error'
 						});	
 					},
 				});
 			},
 			//点击历史记录跳转到搜索列表
 			
 			//输入框内容
 			change(e) {

 			},
 			//清除输入框内容
 			clear() {
				this.page.inputVal = "";
				this.isShow = false
			},


 		},
 	};
 </script>
 <style lang="scss" scoped>
	 .search-box {
	 	background-color: #fff;
	 	overflow: hidden;
	 	padding: 80rpx 30rpx 20rpx;
		position: sticky;
		top: 0;
		width: 100%;
		box-sizing: border-box;
	 	margin-bottom: 40rpx;
	 	.searchCon {
	 		height: 80rpx;
	 		// background: #F2F2F2;
	 		// border-radius: 32rpx;
	 		overflow: hidden;
	 	}
	 
	 	/deep/.u-action-active {
	 		width: 100rpx;
	 		height:80rpx;
	 		line-height:80rpx;
	 		color: #111111;
	 		text-align: center;
	 	}
	 }
 	.content {
 		padding: 0 30rpx 0 60rpx;
 	}
 	

 	.history-box {
 		margin-bottom: 50rpx;
 		.title-box {
 			margin-bottom: 30rpx;
 			.title {
 				font-size: 24rpx;
 				font-family: $uni-font-family-Bold;
 				color: #B6B6B6;
 			}

 			.right {
 				.txt {
 					color: #98999a;
 					font-size: $uni-font-size-24;
 					margin-left: 8rpx;
 					height: 44rpx;
 					line-height: 44rpx;
 				}
 			}

 			.icon {
 				margin-top: 4rpx;
 			}
 		}

 		.history-list {
 			display: flex;
 			justify-content: start;
 			flex-wrap: wrap;

 			.history-item {
 				height: 60rpx;
 				line-height: 60rpx;
 				background: #f5f5f5;
 				border-radius: 6rpx;
 				padding: 0 20rpx;
 				margin-bottom: 20rpx;
 				color: #333;
 				font-size: 26rpx;
 				margin-right: 20rpx;
 			}
			.history-item2{
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				margin-bottom: 15rpx;
				font-family: $uni-font-family-Bold;
				color: #777;
				font-size: 30rpx;
			}
 		}
 	}
	.list{
		.item{
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;
			.pic{
				width: 210rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
				overflow: hidden;
				&::before{
					padding-top:63.8095%;
				}
			}
			.text{
				margin-right: auto;
			}
			.title{
				color: #050505;
				font-size: 30rpx;
				margin-bottom: 15rpx;
				margin-top: -30rpx;
			}
			.info{
				color: #aaa;
				font-size: 24rpx;
			}
		}
	}
 	
 </style>